<template>
  <div>
    <Nav></Nav>
    <div class="container-fluid" style="margin-top: 100px">
      <!-- 看板 -->
      <div class="row">
        <div class="col-md-1"></div>
        <div class="col-md-10">
          <div class="card">
            <div class="card-header bg-light">
              个人中心: <span >{{ user.username }}</span>
            </div>
            <div class="card-body">
              <div class="row">
                <div class="col-md-8">
                  <table class="table table-condensed lead">
                    <tr>
                      <td style="width: 100px">用户信息</td>
                      <td><span >{{ user.username }}</span></td>
                    </tr>
                    <tr>
                      <td>年龄</td>
                      <td><span ></span>{{ user.age }}</td>
                    </tr>
                    <tr>
                      <td>手机号</td>
                      <td><span >{{ user.mobile }}</span></td>
                    </tr>
                    <tr>
                      <td>个人邮箱</td>
                      <td><span  >{{ user.email }}</span></td>
                    </tr>
                    <tr>
                      <td>地址</td>
                      <td><span  >{{ user.address }}</span></td>
                    </tr>
                  </table>
                  <hr />
                </div>
                <div class="col-md-4">
                  <img
                    :src="user.avatar"
                    class="img-fluid img-thumbnail"
                    alt=""
                  />
                </div>
              </div>
              <hr />
              <p class="text-justify">
                <span readonly>{{ user.description }}</span>
              </p>
            </div>
            <div class="card-footer">
              <a
                href="#"
                class="btn btn-success btn-sm"
               @click="back()"
                ><i class="fa fa-history"></i> 返回</a
              >
            </div>
          </div>
        </div>
        <div class="col-md-1"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="UserInfo">
import Nav from "../Nav.vue";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/font-awesome.css";
import { useRoute, useRouter } from "vue-router";
import { ref, reactive, onMounted,watch } from "vue";
import { getVipUserInfo } from "../../api/vipuser";
const route = useRoute();
const router = useRouter();

const userId = route.params.id as string;
const user = reactive({
  username: "",
  age: "",
  mobile: "",
  email: "",
  address: "",
  description: "",
  avatar: "",
});
const getUserInfo = async () => {
  const res = await getVipUserInfo(userId);
  if (res.data.code === 1) {
    Object.assign(user, res.data.data);
  }
};
watch(
  () => route.params.id,
  async (newId: any) => {
    if (newId !== userId) {
        userId = newId;
        user = null;
      await onMounted();
    }
  }
);
const back = () => {
  window.location.href = "/userList";
}

onMounted(() => {
    getUserInfo()
})
</script>

<style scoped></style>
